<template>
  <div style="display: flex; align-items: flex-start !important; justify-content: space-between; gap: 1.875rem;">
    <el-card shadow="never" class="box-card">
      <div slot="header" style="display: flex; align-items: flex-start; justify-content: space-between">
        <span>赛福斯特公司党支部年度党建考核KPI系统</span>
        <el-button type="text" :size="size" @click="newKPI" icon="el-icon-plus">新建</el-button>
      </div>
      <el-table :size="size" :stripe="true" :data="kpiListVOS" @cell-click="viewKPIDetail"
                :cell-style="cellStyle" border>
        <el-table-column type="index" label="序号" min-width="5%" header-align="center"></el-table-column>
        <el-table-column label="标题" prop="title" min-width="20%" header-align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" min-width="15%" header-align="center"></el-table-column>
        <el-table-column label="支部书记" prop="branchSecretary" min-width="10%" header-align="center"></el-table-column>
        <el-table-column label="完成率" prop="completionRate" min-width="5%" header-align="center"></el-table-column>
        <el-table-column label="KPI指标任务书"  min-width="30%"  header-align="center">
          <template slot-scope="scope">
            <el-link v-if="scope.row.indicatorTaskBookAttachment" size="mini"
                     :href="scope.row.indicatorTaskBookAttachment.filePath" target="_blank" type="primary"
            >{{ scope.row.indicatorTaskBookAttachment.filePath.split('/').pop()}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="年度考核得分" prop="score" min-width="10%" header-align="center"></el-table-column>
        <el-table-column min-width="5%"
                         v-if="isEdit">
          <template slot-scope="scope">
            <el-button type="text" size="mini" header-align="center" @click="editKPI(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <ReleaseKPI :releaseKPIVisible="releaseKPIVisible" :size="size" :kpiPartyBuilding="kpiPartyBuilding"
                :kpiPartyPlan="kpiPartyPlan" :branchSecretary="branchSecretary" :indicatorTaskBookAttachment="indicatorTaskBookAttachment"
                :uploadAction="uploadAction" @release="handleRelease" @close="handleClose"></ReleaseKPI>
    <Calendar></Calendar>
  </div>
</template>

<script>
import ReleaseKPI from "@/views/ReleaseKPI";
import moment from "moment";
import Calendar from "@/components/Calendar";

export default {
  name: "KPIList",
  components: {Calendar, ReleaseKPI},
  data() {
    return {
      size: 'mini',
      uploadAction: `${process.env.VUE_APP_API_BASE_URL}/file/upload`,
      releaseKPIVisible: false,
      indicatorTaskBookAttachment:'',
      branchSecretary:'',
      kpiPartyBuilding: [],
      kpiPartyPlan: [],
      kpiListVOS: [],
      isEdit:false
    }
  },
  methods: {
    newKPI() {
      this.releaseKPIVisible = true
    },
    handleRelease(treeData) {
      console.log(JSON.stringify(treeData, null, 2))
      this.$http.post("/kpi/release/", treeData, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
        if (response.data.code == 1) {
          this.$message({
            type: 'success',
            message: "KPI发布成功",
            showClose: true,
          });
        } else {
          this.$message({type: 'error', message: '发布失败:', showClose: true});
        }
      });
    },
    handleClose() {
      this.releaseKPIVisible = false
    },
    viewKPIDetail(row, column, cell, event) {
      if (column.property == 'title') {
        this.$router.push({name: 'KPIDetail', params: {id: row.id}});
      }
    },
    cellStyle({row, column, rowIndex, columnIndex}) {
      if (column.property === 'title') {
        return {
          color: '#1989FA', // 蓝色文本
          textDecoration: 'underline', // 下划线
          cursor: 'pointer', // 鼠标悬停时显示手型
        };
      }
      return {};
    },
    editKPI(id){
      this.$router.push({name: 'EditKPI', params: {id: id}});
    }
  },
  mounted() {
    const user = JSON.parse(localStorage.getItem('user'))
    if (user.username === 'mengqiang' || user.username === 'cfswt' || user.username === 'renting') {
      this.isEdit = true
    }
    this.$http.get("/kpi/list/").then((response) => {
      console.log(response.data.data)
      if (response.data.code == 1) {
        this.kpiListVOS = response.data.data.map(item => {
          return {
            ...item,
            createTime: moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          }
        })
      } else {
        this.$message({type: "error", message: "获取列表数据失败:", showClose: true})
      }
    })
  }
}
</script>